<template>
  <div>
    <Card>
      <page-tables
        v-model="data.list"
        :columns="columns"
        :page-total="data.total"
        :page-num="data.query.page"
        :page-limit="data.query.limit"
        :loading="data.loading"
        :height="540"
        show-total
        show-elevator
        show-sizer
        @on-page-change="changePage"
        @on-page-size-change="changeSize"
      />
    </Card>
  </div>
</template>

<script>
import { PageTables } from '_c/tables'
import { getUserList } from '@/api/admin/user'

export default {
  components: {
    PageTables
  },
  data() {
    return {
      columns: [
        { type: 'index', title: '序号', width: 80 },
        { key: 'name', title: '姓名' },
        { key: 'nickname', title: '昵称' },
        { key: 'account', title: '账号' },
        { key: 'email', title: 'Email' },
        {
          title: 'Handle',
          key: 'handle',
          options: ['delete'],
          button: [
            (h, params, vm) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?'
                },
                on: {
                  'on-ok': () => {
                    vm.$emit('on-delete', params)
                    vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                  }
                }
              }, [
                h('Button', '自定义删除')
              ])
            }
          ]
        }
      ],
      data: {
        loading: true,
        query: {
          page: 1,
          limit: 10
        },
        list: [],
        total: 0
      }
    }
  },
  methods: {
    getList() {
      this.data.loading = true
      getUserList(this.data.query).then(res => {
        this.data.list = res.data.data
        this.data.total = res.data.total
        this.data.loading = false
      })
    },
    changePage(val) {
      this.data.query.page = val
      this.getList()
    },
    changeSize(val) {
      this.data.query.limit = val
      this.getList()
    }
  },
  mounted() {
    this.getList()
  }
}
</script>
